<template>
  <div class="houseDetail_wrapper">
    <div class="page-nav" id="nav">
      <div class="inner clearfix">
        <a class="on" href="javascript:;" rel="nofollow">楼盘首页</a>
        <a href="javascript:;" rel="nofollow" class="">热销户型</a>
        <a href="javascript:;" rel="nofollow" class="">楼盘动态</a>
        <a href="javascript:;" rel="nofollow" class="">楼盘点评</a>
        <a href="javascript:;" rel="nofollow" class="">楼盘周边</a>
        <a href="javascript:;" rel="nofollow" class="">楼盘信息</a>
        <a href="javascript:;" rel="nofollow">推荐楼盘</a>
      </div>
    </div>
    <div class="slider-warpper">
      <div class="slider-warpper_left">
        <Slider :sliderArr="info.house_banner" />
        <Hx
          v-if="info.house_type && info.house_type.length"
          :list="info.house_type"
          :refer_price="info.refer_price"
        />
        <Dt
          v-if="info.house_action && info.house_action.length"
          :list="info.house_action"
        />
        <Comment
          v-if="info.house_comment && info.house_comment.length"
          :list="info.house_comment"
        />
      </div>

      <div class="detail-intro">
        <div class="title clearfix">
          <strong>{{ info.house_title }}</strong>
          <span>{{ info.pro_type }}</span>
        </div>
        <div class="price-box clearfix">
          <span class="price-txt fl">
            <em class="price">{{
              info.refer_price ? info.refer_price : "待定"
            }}</em
            ><em class="unit">元/㎡(均价)</em>
          </span>
        </div>
        <div class="tags-box clearfix">
          <span
            class="tag"
            v-for="(v, i) in itemChange(info.item_pro)"
            :key="i"
          >
            {{ v }}
          </span>
        </div>
        <!-- 折扣信息 -->
        <div class="static-box" style="display: block">
          <div class="intro-list clearfix">
            <p class="ellipsis">
              <span class="label">物业类型</span>
              <span>{{
                info.house_detail && info.house_detail.land_use_time
              }}</span>
            </p>
            <p class="ellipsis">
              <span class="label">楼盘地址</span
              ><span class="context address">{{ info.house_addr }}</span>
            </p>
            <!-- <p>
              <span class="label">开盘时间</span
              ><span class="context">2023.03.31</span>
            </p> -->
            <p>
              <span class="label">户型面积</span>
              <span class="context" id="layoutN"> {{ info.parlour }}室</span>
            </p>
            <p class="fxts">
              <span class="label">联系客服</span>
              <span class="context">{{ info.house_tel }}</span>
            </p>
          </div>
          <div class="info-more">查看更多楼盘信息</div>
        </div>
      </div>
    </div>

    <div class="bottom-wrappar">
      <map-box v-if="markers.length" :markers="markers" />
      <!-- <Info /> -->
      <house-list :houseList="list" />
    </div>
  </div>
</template>


<script >
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { useStore, mapMutations, mapGetters } from "vuex";
import { useRoute } from "vue-router";
import Slider from "./components/slider.vue";
import Hx from "./components/anchortarget.vue";
import Dt from "./components/dt.vue";
import Comment from "./components/comment.vue";
import MapBox from "./components/map.vue";
import HouseList from "@/components/houseList/house.vue";
import Info from "./components/info.vue";
import { get } from "@/api/https";
import { itemChange } from "../../hooks/help";
export default defineComponent({
  components: {
    Slider,
    Hx,
    Dt,
    Comment,
    MapBox,
    HouseList,
    Info,
  },

  setup() {
    const data = reactive({
      info: {},
      form: {
        pageSize: 4,
        page: 1,
        house_title: "",
      },
      list: [],
      markers: []
    });
    const store = useStore();
    const route = useRoute();
    const getInfo = () => {
      let id = route.query.id;
      get("house/", id).then((res) => {
        let info = res;
        info.house_banner = info.house_banner.split(",");
        info.item_pro = info.item_pro && info.item_pro.split(",");
        info.keywords = info.keywords && info.keywords.split(",");
        info.house_type.forEach((item) => {
          item.house_img = item.house_img && item.house_img.split(",");
        });
        if (info.house_comment.length > 2) {
          info.house_comment = info.house_comment.splice(0, 2);
        }

        let markers = {
          latitude: info.map_lat,
          longitude: info.map_lng,
          city: info.city,
          house_title: info.house_title,
        };
          data.markers.push(markers)
        data.info = info;
        // data.markers.latitude = info.map_lat
        // data.markers.longitude = info.map_lng
        // data.markers.city = info.city
        // data.markers.house_title = info.house_title
      });
    };
    const getHouse = () => {
      store.dispatch("home/houseList", data.form).then((res) => {
        let arr = res.data;
        arr.forEach((item) => {
          item.house_banner = item.house_banner && item.house_banner.split(",");
          item.keywords = item.keywords && item.keywords.split(",");
          item.item_pro = item.item_pro && item.item_pro.split(",");
          item.keywords =
            item.keywords && item.keywords.length && item.keywords.slice(0, 2);
        });
        data.list = arr;
      });
    };
    onMounted(() => {
      getInfo();
      getHouse();
    });
    return {
      ...toRefs(data),
      itemChange,
    };
  },
});
</script>

<style lang="scss" >
.houseDetail_wrapper {
  width: 1200px;
  margin: 0 auto;
  .page-nav {
    height: 50px;
    box-sizing: border-box;
    margin-top: 30px;
    border-bottom: 2px solid #3f85ff;
    .inner {
      position: relative;
      .on {
        background: #3f85ff;
        color: #fff;
        padding: 0 25px;
      }
      a {
        float: left;
        height: 48px;
        line-height: 50px;
        padding: 0 18px;
        font-size: 16px;
        color: #333;
        font-weight: bold;
        text-decoration: none;
        &:hover {
          color: #3f85ff;
        }
      }
    }
  }
  .slider-warpper {
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    .slider-warpper_left {
      width: 800px;
    }
    .detail-intro {
      width: 376px;
      font-size: 14px;
      .title {
        /* display: none; */
        font-size: 27px;
        margin-bottom: 20px;
        padding: 0;
        span {
          line-height: 24px;
          margin-left: 10px;
          margin-top: 2px;
          padding: 3px 5px;
          font-size: 14px;
          text-align: center;
          color: #fff;
          background: #3f85ff;
          border-radius: 2px;
        }
      }
      .price-box {
        display: flex;
        .price-txt {
          height: 50px;
          .price {
            float: left;
            font-size: 40px;
            color: #e03236;
            font-weight: bold;
            line-height: 67px;
            position: relative;
            top: -16px;
          }
          .unit {
            float: left;
            margin-left: 7px;
            margin-top: 16px;
            font-size: 16px;
            color: #e03236;
          }
        }
      }
      .tags-box {
        .tag {
          margin-top: 8px;
          margin-right: 15px;
          padding: 0 5px;
          height: 18px;
          line-height: 18px;
          background: rgba(122, 144, 182, 0.08);
          font-size: 12px;
          color: #7a90b6;
        }
      }
      .intro-list {
        margin-top: 21px;
        padding-top: 20px;
        border-top: 1px solid #efefef;
        .label {
          position: absolute;
          left: 0;
          top: 0;
          color: #9b9b9b;
        }
        p {
          position: relative;
          padding-left: 88px;
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 24px;
          color: #000;
          min-height: 24px;
        }
      }
      .info-more {
        display: block;
        margin-top: 17px;
        width: 100%;
        height: 35px;
        line-height: 35px;
        background: #f8f8f8;
        border-radius: 3px;
        font-size: 12px;
        color: #333333;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>